
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通讯录</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="../../javascript/api.js"></script> <!-- api.js必须放到最开头 -->
	    <script src="../../javascript/axios.js"></script>
	    <script src="../../javascript/vue.js"></script>
	    <script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
	    <script src="../../javascript/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="addressList" id="addressList">
			
			<div class="left_div"><!--左边的div-->
				<div class="m-card">
					<img v-if="showCancelButton" class="input_cancel_button" src="../../images/weChat/no.png"  @click="inputCancel"/>
					<input  @keyup.enter="search"  class="search" v-model="searchVal" placeholder="搜索联系人、部门">
					<img  class="input_search_button" src="../../images/weChat/search.png"/>
					<button class="botton_search" @click="search()">搜索</button>
				</div>
				
				<div class="left-tab-content">
					
						<dl v-if="isSearch===false" class="m-list dis_blone" ><!--部门结构-->
							<dt  @click="chooseBrance(branchsLeft.orgSerialNo)"  class="item_head">
								<img @click="refresh" class="avatar"   v-if="branchsLeft.name" src="../../images/adressList/brundHeadImg.png" />
								<p class="name">{{branchsLeft.name}}</p>
								<p class="firstText">组织架构</p>
							</dt>
							<div class="shadow" ></div>
							
							<dd @click="chooseBrance(item_brance.orgSerialNo)" v-for="item_brance in branchsLeft.organizationVos">
								<img src="../../images/adressList/bumen.png"/>
								<p class="child_name">{{item_brance.name}}</p>
								<p class="child_text">所在部门</p>
							</dd>
							
						</dl>	
						
						<dl class="dis_blone dl_search" v-if="isSearch===true&&searchLeft.person.length>0"><!--搜索窗口-->
							<dt class="dt_search">联系人</dt>
							<dd @click="checkPerson(item.userId)" class="dd_search" v-for="item in searchLeft.person">
								<img v-if="item.picture==null||item.picture == '0'" src="../../images/lefticon/user.png"/>
								<img v-else :src="item.picture"/>
								<p>{{item.name}}</p>
								<span>{{item.quarters}}</span>
							</dd>
						</dl>
						
						<div v-if="isSearch===true"  class="" style="width: 100%;height: 16px;background: #f4f4f4;"></div>
						<div v-if="isSearch===true&&searchLeft.person.length==0&&searchLeft.branchs.length==0"  class="" style="width: 100%;height: 16px;background: #f4f4f4;text-align: center;line-height: 2px">无结果</div>
						<dl class="dis_blone dl_search" v-if="isSearch===true&&searchLeft.branchs.length>0"><!--搜索窗口-->
							<dt class="dt_search">部门</dt>
							<dd class="dd_search" v-for="item in searchLeft.branchs" >
								<img @click="checkBranch(item.orgSerialNo)" src="../../images/adressList/brundHeadImg.png"/>
								<p  @click="chooseBrance(item.orgSerialNo)">{{item.name}}</p>
							</dd>
						</dl>
				</div>
			</div>
			
			<div class="right_div" ><!--右边的div-->
				
				<div class="right_div_title"><!--右上的部门显示-->
					<img onclick="goLeft(this)"  class="left" src="../../images/adressList/left.png"/>
					<div class="overflow"><!--隐藏滚动条-->
						<p id="scrollP">&nbsp;&nbsp;<span v-for="item ,index in topBranchs" class="top_span"  @click="chooseBrance(item.orgSerialNo)">{{item.name}}
								<span v-if="index != topBranchs.length-1">></span>
							</span>
						</p>
					</div>
					<img onclick="goRight(this)" class="right" src="../../images/adressList/right.png"/>
				</div>
				
				<div class="right_div_branch"><!--右中心的部门显示-->
					<ul>
						<li v-if="topBranchs.length>1" class="right_div_branch_li" @click="chooseBrance(lastLevel.orgSerialNo)"><!--返回上一级-->
							<div class="type_one">
								<img style="height: 20px;width: 30px;top:25px;left:32px;" src="../../images/adressList/go_back.png"/>
								<p >返回上一级</p>
							</div>
						</li>
						
						<li class="right_div_branch_li" v-for="item ,index in rightBranchs.organizationList"><!--部门-->
							<div class="type_one">
								<img @click="checkBranch(item.orgSerialNo)" src="../../images/adressList/brundHeadImg.png"/>
								<p  @click="chooseBrance(item.orgSerialNo)">{{item.name}}</p><span class="span_right_row"><img src="../../images/adressList/righr2.png"></span>
							</div>
						</li>
						
						<li class="right_div_branch_li" v-for="item ,index in rightBranchs.userList" ><!--个人-->
							<div @click="checkPerson(item.userId)" class="type_two" >
								<img v-if="item.picture===null||item.picture === '0'||item.picture === undefined"  src="../../images/lefticon/user.png"/>
								<img v-else  :src="item.picture"/>
								<p>{{item.name}}</p>
								<span>{{item.description}}</span>
							</div>
						</li>
						
						<p v-if="rightBranchs.userList.length===0 && rightBranchs.organizationList.length===0" style="text-align: center;margin: 20px;">{{noDetail}}</p>
						
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script src="js/addressApi.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		let speed = 50;/*全局变量，速度*/
		let span_wight = 0;
		function goLeft(ev){
			$("#scrollP").scrollLeft($("#scrollP").scrollLeft()-speed);
		}
		function goRight(ev){
			$("#scrollP").scrollLeft($("#scrollP").scrollLeft()+speed);
		
		}
		
		function goRightMix(){/*去到最右*/
			$("#scrollP .top_span").each(function(){
				span_wight+=$(this).width();
			})
			$("#scrollP").scrollLeft($("#scrollP").scrollLeft()+span_wight);
		}
		
		function clickFirstBranch(){
			$('.left_div dl').eq(0).children('dt').click();
		}
		
		document.oncontextmenu=function(e) {
 		 	console.log(e);
 		 	return false;
		}
			new  Vue({
				el:"#addressList",
				data:{
					noDetail:'没有更多数据',
					searchVal:'',/*搜索框的值*/
					showCancelButton:false,/*是否显示搜索框旁边的取消按钮*/
//					lastLevel:'',
					searchLeft:{/*搜索*/
						person:[
							
						],
						branchs:[
							
						],
					},
					isSearch:false,/*是否显示搜索页面*/
					
					branchsLeft:[/*左边的部门总显示*/
					
					],
					rightBranchs:{
								userList:[],
								organizationList:[],						
					},/*右边的部门显示*/
					topBranchs:[],/*上面的部门显示*/
				},
				methods:{
					refresh(){
						location.reload();
					},
					
					chooseBrance(val){/*选中这个部门*/
						if(val!=''){
							apiChooseBrance(this,val);
						}
					},
					checkBranch(val){/*部门名片*/
						apiCheckBranch(val);
					},
					checkPerson(val){/*个人名片*/
						apiCheckPerson(val)
					},
					search(val){/*搜索*/
						apiSearch(this);
					},
					inputCancel(){/*搜索框的取消按钮*/
						this.searchVal='';
						this.isSearch=false;
					},
					startLoading(){
						this.loading = layer.load(2);
					},
					closeLoading(){
						layer.close(this.loading)
					},
					throwErrors(msg){/*异常*/
						layer.alert(msg, {
						  skin: 'layui-layer-molv' //样式类名
						  ,closeBtn: 0
						  ,title:'错误'
						});
					}
				},
				mounted(){
					apiMountedLeft(this).then(()=>{
						clickFirstBranch();
					})
					
				},
				computed:{
					lastLevel(){
						return this.topBranchs[this.topBranchs.length-2];
					}
				},
				updated(){/*页面发生变化，调用这个*/
					if(this.topBranchs.length!=0){
						goRightMix();
					}
					
					if(this.searchVal.length===0){
						this.isSearch=false;
					}
					this.searchVal.length!=0?this.showCancelButton = true:this.showCancelButton = false;
				}
			})
	</script>
</html>
	